<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">采集数据明细</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                >
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >设备编号</label
                        >
                        <input
                            type="text"
                            pInputText
                            placeholder="设备编号"
                            pTooltip="设备编号"
                            [(ngModel)]="searchForm.meterId"
                        />
                    </div>
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >所属用户</label
                        >
                        <input
                            type="text"
                            pInputText
                            placeholder="所属用户"
                            pTooltip="所属用户"
                            [(ngModel)]="searchForm.applicantName"
                        />
                    </div>
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >机井名称</label
                        >
                        <input
                            type="text"
                            pInputText
                            placeholder="机井名称"
                            pTooltip="机井名称"
                            [(ngModel)]="searchForm.wellName"
                        />
                    </div>
                </div>

                <div class="p-toolbar-group-right formgroup-inline">
                    <div class="field">
                        <p-button label="查询" icon="pi pi-search" (click)="search()"></p-button>
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="重置"
                            class="p-button-secondary"
                            (click)="reset()"
                        ></button>
                    </div>
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="col-12">
        <div class="card" style="min-height:625px">
            <p-table
                #dt1
                [value]="data"
                dataKey="wellCode"
                [rowHover]="true"
                [rows]="10"
                [paginator]="true"
                [rowsPerPageOptions]="[10, 25, 50]"
                scrollDirection="both"
                [scrollable]="true"
                styleClass="p-datatable-striped"
                responsiveLayout="scroll"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th width="10%" pFrozenColumn>
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                设备编号
                            </div>
                        </th>
                        <th width="20%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                设备名称
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                所属用户
                            </div>
                        </th>
                        <th width="10%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                压力(Mpa)
                            </div>
                        </th>
                        <th width="15%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                瞬时流量(万m³)
                            </div>
                        </th>
                        <th width="15%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                累计流量(万m³)
                            </div>
                        </th>
                        <th width="20%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                抄表时间
                            </div>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-item>
                    <tr>
                        <td width="10%" pFrozenColumn>
                            {{ item.meterId }}
                        </td>
                        <td width="20%">
                            {{ item.meterName }}
                        </td>
                        <td width="10%">
                            {{ item.applicantName }}
                        </td>
                        <td width="10%">
                            {{ item.pressure }}
                        </td>
                        <td width="15%">
                            {{ item.instanFlow }}
                        </td>
                        <td width="15%">
                            {{ item.accruedFlow }}
                        </td>
                        <td width="20%">
                            {{ item.readTime }}
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage">
                    <tr>
                        <td colspan="7">没有找到数据信息</td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="loadingbody">
                    <tr>
                        <td colspan="7">正在加载数据信息，请稍等</td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
</div>
